<template>
  <view class="flex flex-sub flex-direction align-center justify-center full-height bg-white">
    <view :style="[{animation: 'show 1s 1'}]">
      <image style="width: 150px; height: 150px;"
             src="../../../../static/logo.png"></image>
    </view>
    <view v-if="mode==='password'" style="width: 80%;">
      <view class="margin solid-bottom">
        <uni-easyinput :inputBorder="false" placeholder="用户名" v-model="username"></uni-easyinput>
      </view>
      <view class="margin solid-bottom">
        <uni-easyinput type="password" :inputBorder="false" placeholder="密码" v-model="password"></uni-easyinput>
      </view>
      <view class="flex flex-sub flex-direction justify-between">
        <view class="flex flex-direction padding margin">
          <button class="cu-btn xxl bg-gradual-blue round " @click="passwordLogin">
            <text class="text-xxl">密码登录</text>
          </button>
        </view>
        <view class="flex flex-sub justify-center">
          <button class="cu-avatar cu-btn round lg text-lg margin-right bg-green" @click="changeModeWechat">
            <text class="cuIcon-weixin"></text>
          </button>
        </view>

      </view>
    </view>
    <view v-else>
      <view class="flex flex-direction">
        <button @click="onLogin" class="cu-btn xxl bg-green round">
          <text class="cuIcon-weixin">&nbsp;</text>
          <text class="text-xxl">微信一键登录</text>
        </button>
        <button class="cu-btn xxl bg-white line round" @click="changeModePassword">
          <text class="text-xl">用户名密码登录</text>
        </button>
      </view>
    </view>

  </view>

</template>

<script setup lang="ts">

import api from '@/api'
import {useUserStore,} from '@/store'
import {ref} from "vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {debounce, encrypt} from "@/utils";

const loading = ref(false)
const userStore = useUserStore()
const username = ref('')
const password = ref('')

const mode = ref('wechat')

const onLogin = debounce(() => {
  loading.value = true
  uni.showLoading({
    title: '正在登录...'
  })
  uni.login({
    provider: 'weixin',
    success: function (loginRes: any) {
      api.auth.login({
        code: loginRes.code
      }).then((res: any) => {
        if (res.data.code === 0) {
          userStore.setUserInfo(JSON.parse(res.data.data.userInfo))
          userStore.setToken(res.data.data.token)
          userStore.setRefreshToken(res.data.data.refreshToken)
          uni.switchTab({
            url: '/pages/user/home/home',
            success: function () {
              uni.showToast({
                icon: 'success',
                title: '登录成功'
              })
            }
          })
        } else {
          uni.navigateTo({
            url: '/pages/common/auth/register/register'
          })
        }
        uni.hideLoading()
        loading.value = false
      })

    }
  })
}, 1000)

const passwordLogin = () => {
  loading.value = true
  uni.showLoading({
    title: '正在登录...'
  })
  api.auth.passwordLogin({
    username: username.value,
    password: encrypt(password.value)
  }).then(res => {
    if (res && res.data.code === 0) {
      userStore.setUserInfo(JSON.parse(res.data.data.userInfo))
      userStore.setToken(res.data.data.token)
      userStore.setRefreshToken(res.data.data.refreshToken)
      uni.switchTab({
        url: '/pages/user/home/home',
        success: function () {
          uni.showToast({
            icon: 'success',
            title: '登录成功'
          })
          uni.hideLoading()
          loading.value = false
        }
      })
    }
  })
}

const changeModePassword = () => {
  mode.value = 'password'
}
const changeModeWechat = () => {
  mode.value = 'wechat'
}
</script>

<style scoped>

</style>
